<template>
    <div class="content">
        <el-tabs class="table" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane class="table-content" :label="t('已使用')" name="1">
                <couponItem class="item" v-for="(item, index) in coupon_list" :key="index" :coupon="item" :coupon_status="1"></couponItem>
            </el-tab-pane>
            <el-tab-pane class="table-content" :label="t('未使用')" name="0">
                <couponItem class="item" v-for="(item, index) in coupon_list" :key="index" :coupon="item" :coupon_status="0" @click="use_coupon(item)"></couponItem>
            </el-tab-pane>
            <el-tab-pane class="table-content" :label="t('已过期')" name="2">
                <couponItem class="item" v-for="(item, index) in coupon_list" :key="index" :coupon="item" :coupon_status="2"></couponItem>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import couponItem from "@/components/couponItem.vue";
import {
    getCouponList
} from "@/utils/api";
export default {
    components: {
        couponItem
    },
    data() {
        return {
            activeName: "0",
            coupon_list: []
        }
    },
    created() {
        if (this.$route.query.activeName) this.activeName = this.$route.query.activeName;
        this.handleClick();
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.fromPath = from.name;
        });
    },
    methods: {
        /**
         * 简化翻译方法(少写property)
         * @param {String} v 最后一个key值
         */
        t(v) {
            return this.$t(`优惠券.${v}`);
        },
        handleClick() {
            getCouponList({ status: this.activeName }).then(res => {
                if (res.code == 1) {
                    this.coupon_list = res.data;
                }
            });
        },
        use_coupon(item) {
            // console.log(this.fromPath);
            // console.log(this.$route);
            // console.log(this.$router);
            // this.$router.back();
            if (this.fromPath == "shoppingCart") {
                this.$router.push({
                    name: "shoppingCart",
                    params: {
                        coupon: item,
                        ids: this.$route.query.ids
                    }
                });
            }
        }
    },
}
</script>
<style lang="less" scoped>
.content {
    background: #f9f9f9;
    width: 100%;
    // min-height: calc(100vh - 90px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;

    .table {
        padding: 40px 70px 0px;
        box-sizing: border-box;
        background: #fff;
        width: 72%;
        min-height: calc(100vh - 90px);

        /deep/ .el-tabs__active-bar {
            background-color: #FF5757;
        }

        /deep/ .el-tabs__item.is-active {
            color: #FF5757;
        }

        /deep/ .el-tabs__item {
            font-size: 18px;
            user-select: none;
            color: #222;
        }

        /deep/ .el-tabs__item:hover {
            color: none;
        }

        /deep/ .el-tabs__nav-wrap::after {
            background: none;
        }

        .table-content {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .item {
            margin-right: 40px;
            margin-top: 20px;
            // width: calc((100%/5)-20px);
            // height: 236px;
        }
    }
}
</style>